<template>
	<view class="select-peopleBox">
		<view style="height: 100rpx">
			<view class="searchBox">
				<u--input class="inputBtn" v-model="projectName" placeholder="输入项目名称搜索" prefixIcon="search"
					prefixIconStyle="font-size: 40rpx;color: #909399" />
				<view class="searchBtn" @click="handlSearch">搜索</view>
			</view>
		</view>
		<u-radio-group placement="column" @change="radioChange">
			<view class="box" v-for="(item,index) in list" :key="index">
				<u-radio shape="circle" :key="index" :name="item.id"></u-radio>
				<view class="ml10">
					<view class="flex mb30">
						<view class="name">工程项目名称：</view>
						<view class="value">{{item.projectName}}</view>
					</view>
					<view class="flex mb30">
						<view class="name">项目类型：</view>
						<view class="value">{{item.projectType}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">合同编号：</view>
						<view class="value">{{item.contractNo}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">报备单位：</view>
						<view class="value">{{item.belongUnitName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">电压等级：</view>
						<view class="value">{{item.voltCode}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">项目内容：</view>
						<view class="value">{{item.projectContent}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">项目地点：</view>
						<view class="value">{{item.projectPlace}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">计划开工日期：</view>
						<view class="value">{{item.projectStartDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">计划完工日期：</view>
						<view class="value">{{item.projectEndDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">业主单位：</view>
						<view class="value">{{item.mainUnit}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">监理单位：</view>
						<view class="value">{{item.superviseUnit}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">施工单位：</view>
						<view class="value">{{item.contractorUnit}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">分包单位：</view>
						<view class="value">{{item.zyfbSubUnit}}</view>
					</view>
					<view class="flex mb20">
						<view class="name">项目经理及联系方式：</view>
						<view class="value">{{item.projectManager}}</view>
					</view>
				</view>
			</view>
		</u-radio-group>

		<view class="btn-view">
			<view class="cancelBtn" @click="cancel">取消</view>
			<view class="sureBtn" @click="sureBtn">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projectName: '',
				// 是否加载的标识
				reload: false,
				pageIndex: '1',
				pageSize: '10',
				// 总数
				totalCount: 0,
				list: [],
				obj: {}
			}
		},
		created() {
			// 获取项目名称
			this.getProjectName()
		},
		onReachBottom() {
			if (this.totalCount > this.list.length) {
				this.pageIndex++
				this.getProjectName() // 执行方法
			} else {
				// 停止加载
				return
			}
		},
		methods: {
			// 点击搜索按钮
			handlSearch() {
				this.pageIndex = '1'
				this.list = []
				this.getProjectName()
			},
			// 获取项目名称
			getProjectName() {
				let that = this
				let params = {
					pageIndex: that.pageIndex,
					pageSize: that.pageSize,
					projectName: that.projectName
				}
				that.request(that.$api.getAppProjectManageInfo, params, 'POST').then((res) => {
					// 后端返回的数据
					let rows = res.resultValue.items
					// 后端返回数据的总数
					that.totalCount = res.resultValue.itemCount
					that.list = that.list.concat(rows)
				})
			},
			radioChange(id) {
				this.list.forEach((item) => {
					if (item.id === id) {
						// 赋值在obj对象上
						this.obj = item
					}
				})
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			sureBtn() {
				let that = this
				if (that.obj.id) {
					uni.showModal({
						title: '提示',
						content: '确定选中这一项？',
						success: function(res) {
							if (res.confirm) {
								// 确定了再让上面的页面改变数据
								uni.$emit('projectUpdate', that.obj);
								uni.navigateBack({
									url: '../../editJobApplication/editJobApplication'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择其中一项！',
						duration: 2000
					});
				}
			},
		},
	}
</script>

<style>
	.select-peopleBox {
		/* height: 100vh; */
		background-color: #F7F8FA;
		position: relative;
	}

	.searchBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.inputBtn {
		width: calc(100% - 150rpx);
		height: 60rpx;
		background-color: #F5F6F9;
		box-sizing: border-box;
		border: none;
		font-size: 28rpx;
	}

	.iponeBtn {
		display: flex;
		padding: 0 10rpx 0 10rpx;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #F5F6F9;
		color: #65717D;
		text-align: left;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
		box-sizing: border-box;
	}

	.searchBtn {
		width: 140rpx;
		height: 60rpx;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.box {
		margin: 20rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		padding: 30rpx 30rpx 30rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		display: flex;
	}

	.name {
		width: 320rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
	}

	.value {
		width: calc(100% - 320rpx);
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding-right: 50rpx;
	}

	.btn-view {
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
	}

	.cancelBtn {
		width: 50%;
		height: 80rpx;
		border: 2rpx solid #3473F9;
		color: #3473F9;
		box-sizing: border-box;
		text-align: center;
		line-height: 80rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}

	.sureBtn {
		width: 50%;
		height: 80rpx;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin-left: 20rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}
</style>
